<template>
	<view @click.stop="hodeMulu" class="bg"
		:style="`background-color:${ui_data.data.bgcolor};color:${ui_data.data.textcolor};`"
		@touchstart.stop="touchStart" @touchend.stop="touchEnd">
		<view v-show="leftIsShow" class="leftzhang">
			<view class="zhangjieitems" v-for="(item,index) in zhangJie.data" :key="index">
				<text @click.stop="changezhangjia(index)" :class="numsZhagjie==index?'actives':''">{{item.title}}</text>
				<text v-if="index>mianfeizhangjie">
					<image src="@/static/suo.png" mode=""></image>
				</text>
			</view>
		</view>
		<view class="wrapper" id="wrapper" v-if="iscontexts"
			:style="`line-height:${ui_data.data.size*1.5}rpx ;font-size:${ui_data.data.size}rpx;`">
			<view style="height: 50rpx;"></view>


			<view id="contexts" class="contexts" v-html="contexts">
			</view>
				<view v-if="numsZhagjie>mianfeizhangjie">
					<view class="btns">
						<view class="title">
							本章需要付费
						</view>
						<view class="btn">
							去充值
						</view>
					</view>
				</view>
		</view>
		<view v-else>
			<view class="loading"></view>
		</view>
		<view class="addshujia" v-if="isShezhi" @click.stop="addshujias">加入书架</view>
		<view class="shezhi" v-if="isShezhi">
			<view @click.stop="showMulu">
				<view>
					<image src="@/static/list.png" mode=""></image>
				</view>
				<view>目录</view>
			</view>
			<view @click.stop="shezhifonsize">

				<view>
					<image src="@/static/shezhi.png" mode=""></image>
				</view>
				<view>设置</view>
			</view>
			<view v-if="isRiYe" @click="changeriye(true)">
				<view>
					<image src="@/static/ye.png" mode=""></image>
				</view>
				<view>夜间</view>
			</view>
			<view v-else @click="changeriye(false)">
				<view>
					<image src="@/static/ri.png" mode=""></image>
				</view>
				<view>夜间</view>
			</view>
		</view>
		<view class="colorandsize" v-if="colorandsize">
			<view>
				<view class="shezhicolor">背景颜色</view>
				<view class="kuang">
					<view v-for="(item,index) in morencolor.data" :key="index" @click.stop="selectbgcolor(index)"
						:style="`background-color:${item} ;`">
					</view>
					自定义:<input @click.stop="zuzhimaopao" class="" v-model="ui_data.data.bgcolor" type="color">
				</view>

			</view>
			<view>
				<view class="shezhicolor">文字颜色</view>
				<view class="kuang">
					<view v-for="(item,index) in morencolor.data" :key="index" @click.stop="selecttextcolor(index)"
						:style="`background-color:${item} ;`">
					</view>
					自定义:<input @click.stop="zuzhimaopao" v-model="ui_data.data.textcolor" type="color">
				</view>
			</view>
			<view>
				<view class="shezhisize">字体大小</view>
				<view class="kuangs">
					<slider activeColor="#FFCC33" backgroundColor="#e4e4e4" block-color="#f50f50"
						:value="ui_data.data.size" @change="sliderChange" min="20" max="60" step="5" show-value />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useStore
	} from 'vuex';
	import {
		reactive,
		ref,
		watch
	} from 'vue'
	import {
		getXiangQing,
		seletecontext,
		selectispaid
	} from '@/api/api.js'
	import {
		addtheme,
		addhistory,
		addshujia
	} from '@/api/users.js'

	let iscontexts = ref(false)
	let store = useStore()
	let contexts = ref('')
	let zuzhimaopao = () => {
		return false
	}

	let usersid = store?.state?.users?.id
	let uuid = ref(store.state.xiangqing)

	let numsZhagjie = ref(0)
	let isRiYe = ref(false)
	let leftIsShow = ref(false)
	let isShezhi = ref(false)
	let mianfeizhangjie = ref(0)
	let colorandsize = ref(false)
	let startY = 0
	// let yeshunums = ref(0)
	let pageY = 0
	let height = 0
	const touchStart = (e) => {
		if (e.touches.length == 1) {
			//设置触摸起始点水平方向位置
			let ss = uni.createSelectorQuery().select('.bg')
			ss.boundingClientRect(data => {
				pageY = e.touches[0].pageY
				let ss = e.touches[0].pageY
				height = data.height
				startY = height - ss
			}).exec();

		}
	}
	let morencolor = reactive({
		data: ['#ffffff', '#000000', '#f50f50']
	})
	const touchEnd = (e) => {
		let jieshuY = e.changedTouches[0].pageY
		if ((pageY - jieshuY) > 60 && startY < 150) {

			numsZhagjie.value++
			changezhangjia(numsZhagjie.value)

		} else if ((pageY - jieshuY) < -60 && (height - startY) < 150) {
			if (numsZhagjie.value > 0) {
				numsZhagjie.value--
				changezhangjia(numsZhagjie.value)
			}
		}
	}

	const changeuidata = (id, size, textcolor, bgcolor) => {
		addtheme(id, size, textcolor, bgcolor)
	}
	//设置主题
	let ui_data = reactive({
		data: {}
	})
	if (store.state.theme == null) {
		ui_data.data = {
			textcolor: '#000000',
			bgcolor: '#ffffff',
			size: '35'
		}
		store.commit('updatetheme', ui_data.data)
		changeuidata(usersid, ui_data.data.size, ui_data.data.textcolor, ui_data.data.bgcolor)

	} else {
		ui_data.data = store.state.theme
		store.commit('updatetheme', ui_data.data)
		changeuidata(usersid, ui_data.data.size, ui_data.data.textcolor, ui_data.data.bgcolor)
	}
	const selecttextcolor = (i) => {
		ui_data.data.textcolor = morencolor.data[i]

	}
	const selectbgcolor = (i) => {
		ui_data.data.bgcolor = morencolor.data[i]

	}
	let zhangJie = reactive({
		data: null
	})

	let mengban = ''

	const showMulu = () => {
		leftIsShow.value = true
		mengban = ui_data.data.bgcolor
		ui_data.data.bgcolor = '#c2c2c2'
		isShezhi.value = false
		colorandsize.value = false
	}
	const shezhifonsize = () => {
		isShezhi.value = false
		colorandsize.value = true
	}
	const hodeMulu = () => {
		if (leftIsShow.value) {
			leftIsShow.value = false
			ui_data.data.bgcolor = mengban

		} else {
			isShezhi.value = !isShezhi.value
			colorandsize.value = false

		}
	}
	let changeriye = (blooe) => {
		isRiYe.value = !isRiYe.value
		if (blooe) {
			ui_data.data.textcolor = '#323232'
			ui_data.data.bgcolor = '#eeeeee'

		} else {
			ui_data.data.textcolor = '#eeeeee'
			ui_data.data.bgcolor = '#323232'
		}


	}



	const sliderChange = (e) => {
		ui_data.data.size = e.detail.value

	}

	const initContext = (id, index) => {
		getXiangQing(id).then(res => {
			zhangJie.data = JSON.parse(res.data.data[0].data)
			seletecontext(id, zhangJie.data[index].uuid).then(ress => {
				if (ress.data) {
					contexts.value = ress.msg
				} else {
					contexts.value = ress.msg
				}
				iscontexts.value = true
				contexts.value = ress
				uni.pageScrollTo({
					scrollTop: 0
				})
			}).catch(err => {
				console.log(err);
				uni.showToast({
					title: '网络错误',
					icon: 'error'
				});
			})
		})
	}

	initContext(uuid.value, numsZhagjie.value)
	selectispaid(uuid.value).then(res => {
		mianfeizhangjie.value = (res.data.data.length) - 2

	})
	const changezhangjia = (index) => {
		if (leftIsShow.value) {
			ui_data.data.bgcolor = mengban
		}
		iscontexts.value = false
		leftIsShow.value = false
		numsZhagjie.value = index
	}
	const ss = watch(numsZhagjie, (newval, oldval) => {
		initContext(uuid.value, newval)
	})

	addhistory(uuid.value, usersid, new Date().getTime()).then(res => {

	})
	const addshujias = () => {
		addshujia(uuid.value, usersid, new Date().getTime(), numsZhagjie.value).then(res => {
			uni.showToast({
				title: '添加成功'
			})
		}).catch(err => {
			uni.showToast({
				title: '网络错误'
			})
		})
	}
	const changeColor = watch(ui_data.data, (newval) => {
		store.commit('updatetheme', newval)
		changeuidata(usersid, newval.size, newval.textcolor, newval.bgcolor)
	}, {
		deep: true
	})
</script>

<style lang="scss" scoped>
	.addshujia {
		width: 200rpx;
		height: 70rpx;
		background-color: #ff5500;
		line-height: 70rpx;
		color: #ffffff;
		border-radius: 20rpx;
		font-size: 32rpx;
		text-align: center;
		position: fixed;
		right: 0;
		top: 0;
	}

	.bg {
		min-height: 100vh;

	}


	.shezhi {
		background-color: #ffffff;
		z-index: 999;
		width: 100vw;
		padding: 30rpx !important;
		box-sizing: border-box;
		height: 150rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
		text-align: center;
		font-size: 30rpx;
		color: $color3;

		image {
			width: 65rpx;
			height: 65rpx;
		}
	}

	.colorandsize {
		width: 100vw;
		padding: 30rpx !important;
		background-color: #ffffff;
		z-index: 999;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		text-align: center;
		font-size: 30rpx;
		color: $color3 !important;

		.kuang {
			width: 690rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;

			input {
				height: 35rpx;
				width: 80rpx;
				z-index: 9999;
			}

			view {
				height: 35rpx;
				width: 80rpx;
				border: 1rpx solid #ff5500;
				border-radius: 10rpx;
				margin-left: 30rpx;
			}
		}



	}

	.leftzhang {
		background-color: #ffffff !important;
		position: fixed;
		height: 100vh;
		left: 0;
		padding-left: 30rpx;
		overflow: scroll;
		z-index: 9999;
	}

	.zhangjieitems {
		width: 570rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #e8e8e8;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000000;

		text {
			margin-left: 20rpx;

			image {
				width: 45rpx;
				height: 45rpx;
				margin-top: 14rpx;
				margin-right: 25rpx;
			}

		}

		text:nth-chlid(1) {
			width: 350rpx;
			display: inline-block; //设置行内块属性
			white-space: nowrap; //强制不换行
			width: 100%; //固定盒子的宽度
			overflow: hidden; //超出部分隐藏
			text-overflow: ellipsis; //显示‘...’
			margin-top: 10rpx;
		}

	}

	.actives {
		z-index: 999;
		color: #ff5500 !important;
	}

	.wrapper {
		margin: 0 auto;
		width: 710rpx;
	// 	height: 100vh;
	
	// 	overflow: hidden;
		.contexts {
			margin: 0 auto;
			transition: .3s;
			// columns: calc(100vw) 1;
			::v-deep h1 {
				font-size: 50rpx;
				text-align: center;
			}

			::v-deep p {
				text-indent: 60rpx !important;
				margin-top: 40rpx;

			}

			::v-deep imgage {
				margin: 0 auto;
				max-width: 710rpx;
			}

			::v-deep img {
				margin: 0 auto;
				max-width: 710rpx;
			}

		}

	}

	.loading {
		width: 100rpx;
		height: 100rpx;
		border: 4rpx solid #f8f8f8;
		border-left: 4rpx solid #ff5500;
		border-radius: 50%;
		animation: zhuanquan 2s infinite;
		margin: 50% auto;

	}

	@keyframes zhuanquan {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
	.btns{
		width:650rpx;
		margin: 0 auto;
		margin-top: 200rpx;
		.title{
			font-size: 35rpx;
			font-weight: 600;
			line-height: 80rpx;
		}
		.btn{
			height: 85rpx;
			color: #ffffff;
			background-color: #f50f50;
			border-radius: 40rpx;
			text-align: center;
			line-height: 85rpx;
			
		}
	}
</style>